<template>
  <div class="w-full">
    <div
        class="hidden sm:grid grid-cols-1 2xl:grid-cols-5 xl:grid-cols-5 lg:grid-cols-5 gap-3 mt-3 ">
      <div class="col-span-1 sm:col-span-1 2xl:col-span-2 xl:col-span-2 lg:col-span-2 p-3 box intro-y">
        <chinaMap @selProvince="changeProvince" @getMapData="getMapData"/>
      </div>
      <div class="col-span-1 sm:col-span-1 2xl:col-span-3 xl:col-span-3 lg:col-span-3 p-3 box intro-y">
        <div
            class="flex justify-between items-center border-b border-slate-200/60 dark:border-darkmode-400 pb-5 mb-5"
        >
          <div class="font-medium text-lg truncate">选择省份</div>
          <div class="relative">
            <el-input
                v-model="searchQuery"
                style="width: 240px"
                @input="handleInput"
                placeholder="搜索"
                :prefix-icon="Search"
            />
            <div class="absolute bg-white border w-full z-50" v-if="searchResult.length>0">
              <div class="s-result p-2 cursor-pointer" v-for="(item,index) in searchResult"
                   @click="searchProvince(item)">
                {{ item.regionName }}
              </div>
            </div>
          </div>
        </div>
        <province @changeProvince="changeProvince" :selectArea="selectArea" :dataSource="dataSource"/>
      </div>
    </div>
    <div class="mt-3">
      <div class="intro-y box p-5 mt-12 sm:mt-0">
        <div class="flex flex-col md:flex-row md:items-center">
          <div class="flex" v-for="(item,index) in dateText" :key="index" @click="changeDate(item.id)">
            <!--            text-primary-->
            <div>
              <div
                  :class="[activeIndex===index?'text-primary':'','dark:text-slate-300','text-lg','xl:text-xl','font-medium','cursor-pointer']"
              >
                {{ item.name }}
              </div>
            </div>
            <div
                class="w-px h-7 border border-r border-dashed border-slate-200 dark:border-darkmode-300 mx-4 xl:mx-5"
            ></div>
            <!--            <div @click="changeDate('month')">-->
            <!--              <div class="text-slate-500 text-lg xl:text-xl font-medium cursor-pointer">-->
            <!--                月度-->
            <!--              </div>-->
            <!--            </div>-->
            <!--            <div-->
            <!--                class="w-px h-7 border border-r border-dashed border-slate-200 dark:border-darkmode-300 mx-4 xl:mx-5"-->
            <!--            ></div>-->
            <!--            <div @click="changeDate('week')">-->
            <!--              <div class="text-slate-500 text-lg xl:text-xl font-medium cursor-pointer">-->
            <!--                本周-->
            <!--              </div>-->
            <!--            </div>-->
          </div>
          <div class="title absolute">
            新能源预测
          </div>
          <!--          <Dropdown class="md:ml-auto mt-5 md:mt-0">-->
          <!--            <DropdownToggle class="btn btn-outline-secondary font-normal">-->
          <!--              Filter by Category-->
          <!--              <ChevronDownIcon class="w-4 h-4 ml-2"/>-->
          <!--            </DropdownToggle>-->
          <!--            <DropdownMenu class="w-40">-->
          <!--              <DropdownContent class="overflow-y-auto h-32">-->
          <!--                <DropdownItem>PC & Laptop</DropdownItem>-->
          <!--                <DropdownItem>Smartphone</DropdownItem>-->
          <!--                <DropdownItem>Electronic</DropdownItem>-->
          <!--                <DropdownItem>Photography</DropdownItem>-->
          <!--                <DropdownItem>Sport</DropdownItem>-->
          <!--              </DropdownContent>-->
          <!--            </DropdownMenu>-->
          <!--          </Dropdown>-->
        </div>
        <div class="report-chart">
          <chart1/>
        </div>
      </div>
    </div>
    <div class="box grid grid-cols-12 gap-5 mt-5 p-3 border-t intro-y">
      <div
          class="col-span-12"
      >
        <wTable/>
      </div>
    </div>
  </div>
</template>

<script setup>
import {ref, computed, onMounted} from "vue";
import wTable from "./wTable.vue";
import province from "./province.vue";
import chinaMap from "./chinaMap.vue";
import chart1 from "./chart1.vue"
import {Search} from "@element-plus/icons-vue";
import * as $api from "@/api/api.js";
import {debounce} from 'lodash'

const params = ref({
  today: new Date(),
  tomorrow: new Date(),
  afterTomorrow: new Date(),
  dayAfterTomorrow: new Date(),
});
const activeIndex = ref(2);
const searchQuery = ref("");
const searchResult = ref([]);
const selectArea = ref("");
const dateText = ref([
  {
    name: "年度",
    id: 0
  },
  {
    name: "月度",
    id: 1
  },
  {
    name: "本周",
    id: 2
  },
])
const dataSource = ref([]);
const mapData = ref(null);
const formatDate = (date) => {
  const year = date.getFullYear();
  const month = String(date.getMonth() + 1).padStart(2, "0"); // 月份从0开始，所以需要+1，并且保证两位数
  const day = String(date.getDate()).padStart(2, "0"); // 保证日期是两位数
  return `${year}-${month}-${day}`;
};
const dates = computed(() => ({
  today: formatDate(params.value.today),
  tomorrow: formatDate(params.value.tomorrow),
  afterTomorrow: formatDate(params.value.afterTomorrow),
  dayAfterTomorrow: formatDate(params.value.dayAfterTomorrow),
}));
params.value.tomorrow.setDate(params.value.today.getDate() + 1);
params.value.afterTomorrow.setDate(params.value.tomorrow.getDate() + 1);
params.value.dayAfterTomorrow.setDate(params.value.afterTomorrow.getDate() + 1);

onMounted(() => {
  getRegionList();
});

// 获取省列表
const getRegionList = () => {
  $api.GetRegionList().then(res => {
    console.log(res);
    dataSource.value = res;
  })
}
const changeProvince = (province) => {
  console.log("=>(Main.vue:159) province", province);
};
const getMapData = (e) => {
  mapData.value = e;
}
const changeDate = (i) => {
  activeIndex.value = i;
  switch (i) {
    case 0:
      console.log("year");
      break;
    case 1:
      console.log("month");
      break;
    case 2:
      console.log("week");
      break;
  }
}
// 监听输入事件
const handleInput = () => {
  searchDebounced(searchQuery.value)
}
// 防抖后的搜索函数
const searchDebounced = debounce((query) => {
  if (!query) {
    searchResult.value = []
  } else {
    // 从dataSource中搜索符合query的数据
    searchResult.value = dataSource.value.filter((item) => item.regionName.toLowerCase().includes(query.toLowerCase()));
    // searchResult.value = ["北京市", "上海市"]
  }
}, 500) // 防抖延迟500ms
const searchProvince = (item) => {
  searchQuery.value = item.regionName;
  selectArea.value = item.regionName;
  searchResult.value = [];
}
</script>

<style lang="scss" scoped>
.title {
  left: calc(50% - 50px);
  font-weight: bold;
  font-size: 20px;
  color: #555555;
}

.s-result {
  transition: all 0.2s ease;

  &:not(:last-child) {
    border-bottom-width: 1px;
  }

  &:hover {
    background: #444f55;
    color: #ffffff;
  }
}
</style>